import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import AssetKey from "custom/asset_key"
import { ButtonConfirm } from "./components/common"
import { useCallback } from "react"
import styled from "@emotion/styled"
import MarginTopBlock from "@/components/base/MarginTopBlock"
import KycPageSignals from "@/features_signal/kycPageSignals"

const ButtonStartNow = styled(ButtonConfirm)`
    margin-top: auto;
`

export default function StepKycIntroGuide() {
    const handleStartNow = useCallback(() => {
        KycPageSignals.nextStage()
    }, [])

    return (
        <div
            css={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                padding: 0 16rem;
                padding-top: 16rem;
            `}
        >
            <div
                css={css`
                    font-weight: 600;
                    font-size: 16rem;
                    line-height: 24rem;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    text-transform: capitalize;
                    align-self: flex-start;
                    color: #747378;
                `}
            >
                Verify Process
            </div>
            <MarginTopBlock top={16} />
            <div
                css={css`
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: center;
                    gap: 24rem;
                `}
            >
                <GuideStepIntro
                    title="Step1: Take ID Photo"
                    render={() => (
                        <>
                            <div>Make sure information below is clear on your ID</div>
                            <ul
                                css={css`
                                    display: flex;
                                    flex-direction: column;
                                    align-items: stretch;
                                    justify-content: center;
                                    gap: 4rem;
                                    padding-left: 18rem;
                                    /* 頭部 */
                                    list-style-type: disc;
                                    li::marker {
                                        color: #0a6cff;
                                        font-size: 20rem;
                                    }
                                `}
                            >
                                <li>Full Name</li>
                                <li>Date of Birth</li>
                            </ul>
                        </>
                    )}
                    image="kyc/guide_intro_1.webp"
                />
                <GuideStepIntro
                    title="Step2: Scan face or Selfie With ID Card"
                    render={() => <>Check that your information is complete and accurate</>}
                    image="kyc/guide_intro_2.webp"
                />
                <GuideStepIntro
                    title="Step3: Information Confirm"
                    render={() => (
                        <>
                            Position your face within the frame, and make sure that you are
                            well-lighted.
                        </>
                    )}
                    image="kyc/guide_intro_3.webp"
                />
            </div>
            <ButtonStartNow onClick={handleStartNow}>Start Now</ButtonStartNow>
        </div>
    )
}

function GuideStepIntro(props: { title: string; render: () => React.ReactNode; image: AssetKey }) {
    const { title, render, image } = props

    return (
        <div
            css={css`
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                gap: 8rem;
            `}
        >
            <div
                css={css`
                    font-weight: 600;
                    font-size: 16rem;
                    line-height: 24rem;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    text-transform: capitalize;
                `}
            >
                {title}
            </div>
            <div
                css={css`
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    background-color: #f8f8f8;
                    border-radius: 8rem;
                    padding: 16rem;
                    font-weight: 500;
                `}
            >
                <div
                    css={css`
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: stretch;
                        justify-content: center;
                    `}
                >
                    {render()}
                </div>
                <Image
                    css={css`
                        width: 72rem;
                        height: 72rem;
                    `}
                    src={image}
                />
            </div>
        </div>
    )
}
